<template>
    <view class="page-body bg-white" :class="[app.setCStyle()]">
		<u-navbar back-text="返回" title="赠送积分"></u-navbar>
		<view v-if="isGive" class="success center p40">
			<u-icon name="checkmark-circle-fill" color="#5CB61A" size="200" label="赠送成功" label-size="60" label-pos="bottom"></u-icon>
			<u-button @click="back" 
				hover-class="none" 
				size="default" 
				class="u-m-t-80">返回</u-button>
			
		</view>
		<view v-else style="height: calc(100% - 88rpx);">
			<view class="u-p-t-80 u-p-b-80 text-center">
				可赠送积分: <text class="base-color fs42">{{account.use_integral}}</text>
			</view>
			<view class="u-flex u-p-l-20 u-p-r-20">
				<view class="fs24 u-p-r-20">赠送用户</view>
				<view class="u-flex-1">
					<u-search placeholder="输入用户ID搜索"
						:show-action="false"
						shape="square"
						bg-color="#fff"
						border-color="#999"
						search-icon=''
						height="70"
						v-model="keyword"
						@blur="loadData('refresh')"></u-search>
				</view>
			</view>
			<view class="u-page p20">
			
			    <swiper :current="tabCurrentIndex" class="swiper-box u-p-t-20" duration="300" @change="changeTab">
			        <swiper-item class="tab-content">
			            <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
			                <!-- 空白页 -->
			                <empty v-if="navList.loaded === true && navList.list.length === 0"></empty>
			                <!-- 列表 -->
			                <view v-for="(item,index) in navList.list" :key="index" class="item">
			                    <view>用户ID：{{item.user_id}}
			                        <text class=" color-base fr">身份：{{item.role_name}}</text>
			                    </view>
			                    <view class="mt10 color-94">
			                        <text>手机号码：{{item.mobile}}</text>
			                    </view>
								<view class="action-box p20">
									<button class="action-btn defaultbtn" @click="showInput(item.user_id)">确认转赠</button>
									</view>
			                </view>
			                <uni-load-more :status="navList.loadingType"></uni-load-more>
			            </scroll-view>
			        </swiper-item>
			    </swiper>
			
				<view :hidden="userFeedbackHidden" class="popup_content">
					<view class="popup_title">赠送积分</view>
					<view class="popup_textarea_item">
					<u-input type="number" class="popup_textarea" placeholder='请输入数额' v-model="use_integral">
					</u-input>
						<view class="mt40">
							<u-button @click="submitFeedback()" shape="circle" class="defaultbtn">确认赠送</u-button>
						</view>
					</view>
				</view>
				<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
			
			</view>
		</view>
		
		
    </view>
</template>

<script>
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    import empty from "@/components/empty";
	import UInput from "../../../uview-ui/components/u-input/u-input";

    export default {
        components: {
			UInput,
            uniLoadMore,
            empty
        },
        data() {
            return {
                selectText: '全部奖励',
                rewardTypeList: [
                    {
                        text: '全部奖励',
                        id: 'all'
                    }
                ],
                selectshow: false,
                calendarText: '',
                show: false,
                isGive: false,
                mode: 'range',
                result: "请选择日期",
                startText: '开始',
                endText: '结束',
                btnType: 'primary',
                startDate: '',
                endDate: '',
                tabCurrentIndex: 0,
                param: {
                    calendar: '',
                    rewardType: 'all',
                    state: 0,
                    p: 0
                },
                navList: [{
                    state: 'all',
                    text: '全部',
                    loadingType: 'more',
                    list: [],
                    p: 0
                },
                    {
                        state: '1',
                        text: '待返',
                        loadingType: 'more',
                        list: [],
                        p: 0
                    },
                    {
                        state: '2',
                        text: '已返',
                        loadingType: 'more',
                        list: [],
                        p: 0
                    },
                    {
                        state: '9',
                        text: '取消',
                        loadingType: 'more',
                        list: [],
                        p: 0
                    }
                ],
                keyword: '',
				hiddenmodalput:true,
				use_integral:'',
				userFeedbackHidden: true, // 默认隐藏
				account:{},
				user_id:0
            }
        },
        onLoad() {
            /*this.loadData()*/
			this.getAccountInfo();
        },
        onShow() {
        },
        onReady() {
        },
        methods: {
			getAccountInfo(){
				this.$u.post('member/api.wallet/getBalanceInfo').then(res => {
					this.account = res.data.account;
				});
			},
            //获取订单列表
            loadData(source) {
                let keyword = this.keyword;
                if (keyword == '' || keyword == null || keyword == undefined) {
                    this.app.showModal('请输入用户ID');
                    return false;
                }
				let navItem = this.navList;
                this.$set(navItem, 'loaded', false);
                navItem.list = [];
                navItem.loadingType = 'loading';
                this.$u.post('member/api.Center/findJunior', {user_id: keyword}).then(res => {
                    console.log(res)
                    navItem.list = res.data.list;
                    this.$set(navItem, 'loaded', true);
					navItem.loadingType = 'nomore';
                })
            },
            // 订单操作
            /*disposeLog(id, _index, _status) {
                let navItem = this.navList[this.tabCurrentIndex];
                this.$u.post('channel/api.Wallet/disposeRewardLog', {id: id, status: _status}).then(res => {
                    navItem.list[_index].buttom = 0;
                    if (_status == 3) {
                        navItem.list[_index].status = '待确定';
                    } else {
                        navItem.list[_index].status = '已返';
                    }
                })
            },*/
			showInput(user_id) { // 显示输入弹出框
            	this.user_id = user_id
				this.userFeedbackHidden = false;

			},
			hideDiv() { // 隐藏输入弹出框
				this.user_id = 0
				this.userFeedbackHidden = true;
			},
			submitFeedback() { // 提交反馈
				var _this =this;
				let use_integral = _this.use_integral;
				if(use_integral < 1 || use_integral == ''){
                    uni.showToast({
                        title: '数额不可小于1',
                        icon: 'none',
                        duration: 2000
                    });
					return false;
				}
                let user_id = _this.user_id;
                this.$u.post('member/api.Center/giveBalance', {user_id: user_id, money: use_integral}).then(res => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000
                    });
                    if(res.code == 1){
                        _this.userFeedbackHidden = true;
						_this.isGive = true;
                    }
                })
			},
			back(){
				uni.navigateBack()
			}
        }
    }
</script>

<style lang="scss">
    @import "~@/pagesB/static/channel/css/wallet.scss";

    .line_box {
        .text {
            margin-top: 10 rpx;
            color: $font-color-light;
        }
    }
	.b-tottom{
		margin: 20rpx;
	}

    .swiper-box {
        height: calc(100% - 190rpx);

        .list-scroll-content {
            position: relative;
            height: 100%;

            .item {
                padding: 20rpx;
                font-size: 30rpx;
				box-shadow: 0px 0px 27rpx 0px rgba(227, 226, 226, 0.66);
				border-radius: 20rpx;

                .info {
                    display: block;
                    font-size: 28 rpx;
                    color: $font-color-light;
                }

                .money {
                    font-size: 30 rpx;
                    font-weight: 700;
                    color: $font-color-base;
                }
            }
        }
    }

    .u-page {
        height: calc(100% - 278rpx);
        overflow: hidden;
    }

    .goods_navbar {
        width: 100%;
        background-color: #FFFFFF;
        padding: 15 rpx;
        line-height: 50 rpx;
        z-index: 1;
    }

	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 2;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 520upx;
		height: 350upx;
		margin-left: -270upx;
		margin-top: -270upx;
		border: 10px solid white;
		background-color: white;
		z-index: 3;
		overflow: auto;
		border-radius: 20upx;
	}

	.popup_title {
		padding-top: 20upx;
		width: 480upx;
		text-align: center;
		font-size: 32upx;
	}

	.popup_textarea_item {
		padding-top: 5upx;
		height: 80upx;
		width: 440upx;
		background-color: #F1F1F1;
		margin-top: 30upx;
		margin-left: 20upx;
	}

	.popup_textarea {
		width: 410upx;
		font-size: 26upx;
		margin-left: 20upx;
	}

	.popup_button {
		margin-top: 20upx;
		color: white;
		background-color: #4399FC;
		border-radius: 20upx;
	}
</style>